<template>
	<view class="section1 flex-col">
		<view class="leaner"></view>
		<view class="outer1 flex-col">
			<view class="bd1 flex-col">
				<view class="section2 flex-col">
					<image class="SingleAvatar56" referrerpolicy="no-referrer" src="../static/logo@2x.png" />
					<text class="word4">手机号</text>
					<input type="number" v-model="goData.account" placeholder="请输入手机号" class="txt2" />
					<view class="section10 flex-col"></view>
				</view>
			</view>
			<text class="info1">密码</text>
			<view class="bd4 flex-row justify-between">
				<input @input="inputVerify" type="text" v-model="goData.password" :password="!see" placeholder="请输入密码"
					class="info2" />
				<image class="icon3" src="../static/icon_308@2x.png" @click="see=false" v-if="see" />
				<image class="icon3" style="height: 17rpx;width: 37rpx;" src="../static/icon_309@2x.png"
					@click="see=true" v-else />
			</view>
			<view class="bd5 flex-col"></view>
			<button class="Button93 flex-col" @click="denglu">
				<text class="txt3">登录</text>
			</button>
			<text class="info3" @click="forget">忘记密码</text>
		</view>
	</view>
</template>
<script>
	import Cache from '@/util/cache.js'
	import {
		getUserInfoApi
	} from '@/api/user.js'

	export default {
		data() {
			return {
				goData: {
					account: '',
					password: '',
					uid: ''
				}, //登录数据
				see: false,
				userinfo: {}
			};
		},
		onLoad() {
			let account = Cache.get('kfaccount')
			let password = Cache.get('kfpassword')
			if (account) {
				this.goData = {
					account,
					password
				}
			}
		},
		onShow() {
			this.user()
		},
		methods: {
			user() {
				getUserInfoApi().then(res => {
					this.userinfo = res.data
					this.goData.uid = this.userinfo.uid
				}).catch(err => {

				})
			},

			//输入验证密码
			inputVerify(event) {
				var value = event.detail.value.toUpperCase()
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				const rule = /[\W]/g
				// 数字和大写字母
				// const rule = /[^0-9A-Za-z]/g
				this.$nextTick(() => {
					this.goData.password = value.replace(rule, '')
				})
			},
			forget() {
				uni.navigateTo({
					url: "./forget"
				})
			},
			denglu() {
				uni.requestSubscribeMessage({
					// tmplIds: ['8weYiNMM30JxdGsHWDAVR8OZmtUFS0NtYHnmITPa_J4','y1woYPuyqzpF9pend8oCy2iy0xidCNNPDbkeZWDcrpE'],
					tmplIds: ['y1woYPuyqzpF9pend8oCy2iy0xidCNNPDbkeZWDcrpE'],
					success: re => {
						this.$request('auth/serlogin', {
							...this.goData,
						}, 'POST').then(ele => {
							console.log(ele, '登录');
							Cache.set('service_login_token', ele.data.token)
							uni.showToast({
								title: '正在登录...',
								duration: 500
							});
							Cache.set('kfaccount', this.goData.account)
							Cache.set('kfpassword', this.goData.password)
							setTimeout(e => {
								uni.reLaunch({
									url: "../buyer/list"
								})
							}, 500)

						})
					},
					fail: err => {
						this.$request('auth/serlogin', {
							...this.goData,
						}, 'POST').then(ele => {
							console.log(ele, '登录');
							Cache.set('service_login_token', ele.data.token)
							uni.showToast({
								title: '正在登录...',
								duration: 500
							});
							Cache.set('kfaccount', this.goData.account)
							Cache.set('kfpassword', this.goData.password)
							setTimeout(e => {
								uni.reLaunch({
									url: "../buyer/list"
								})
							}, 500)

						})
					}
				})




			}
		},
	};
</script>
<style>
	@import '../common.css';
</style>

<style>
	.leaner {

		position: absolute;
		top: 0;
		height: 360rpx;
		width: 100%;
		background: linear-gradient(to bottom, #BCFAC8, transparent);

	}

	.page {
		position: relative;
		width: 750rrpx;
		height: 100vh;
		overflow: hidden;
	}

	.section1 {
		background-color: rgba(255, 255, 255, 1);
		height: 1334rpx;
		width: 750rpx;
	}

	.outer1 {
		width: 750rpx;
		height: 934rpx;
		position: relative;
		z-index: 3;
	}

	.bd1 {
		height: 500rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps9bjqqh0dp8lhwxgdysr9y69jhagsrt2k91768e8c8-a7fb-43ee-80f4-bab47fe80450) 100% no-repeat;
		width: 750rpx;
		padding: 9rpx 0 0 15rpx;
	}

	.section2 {
		width: 723rpx;
		height: 487rpx;
	}

	.section3 {
		width: 720rpx;
		height: 23rpx;
	}

	.img1 {
		width: 67rpx;
		height: 11rpx;
		margin-top: 4rpx;
	}

	.word1 {
		width: 92rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-left: 14rpx;
		display: block;
	}

	.icon1 {
		width: 25rpx;
		height: 18rpx;
		margin-left: 12rpx;
	}

	.word2 {
		width: 119rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin-left: 90rpx;
		display: block;
	}

	.txt1 {
		width: 63rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: right;
		white-space: nowrap;
		line-height: 24rpx;
		display: block;
		margin: 2rpx 0 0 180rpx;
	}

	.icon2 {
		width: 49rpx;
		height: 19rpx;
		margin-left: 9rpx;
	}

	.section4 {
		width: 393rpx;
		height: 56rpx;
		margin: 24rpx 0 0 330rpx;
	}

	.word3 {
		width: 61rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		text-align: center;
		white-space: nowrap;
		line-height: 30rpx;
		margin-top: 14rpx;
		display: block;
	}

	.AppletTopBar14 {
		background-color: rgba(0, 0, 0, 0);
		border-radius: 27rpx;
		height: 56rpx;
		border: 1rpx solid rgba(240, 240, 240, 1);
		width: 158rpx;
	}

	.bd2 {
		width: 108rpx;
		height: 30rpx;
	}

	.section5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin-top: 12rpx;
	}

	.section6 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 12rpx;
		height: 12rpx;
		margin: 9rpx 0 0 3rpx;
	}

	.section7 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin: 12rpx 0 0 3rpx;
	}

	.section8 {
		background-color: rgba(240, 240, 240, 1);
		width: 2rpx;
		height: 30rpx;
		margin-left: 19rpx;
	}

	.section9 {
		background-color: rgba(255, 255, 255, 0);
		border-radius: 50%;
		height: 30rpx;
		border: 4rpx solid rgba(255, 255, 255, 1);
		margin-left: 23rpx;
		width: 30rpx;
	}

	.bd3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 10rpx;
		height: 10rpx;
	}

	.SingleAvatar56 {
		width: 145rpx;
		height: 136rpx;
		margin: 43rpx 0 0 288rpx;
		position: relative;
		z-index: 3;
	}

	.word4 {
		width: 78rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 78rpx 0 0 60rpx;
	}

	.txt2 {
		width: 400rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		display: block;
		margin: 48rpx 0 0 60rpx;
	}

	.section10 {
		background-color: rgba(238, 238, 238, 1);
		width: 600rpx;
		height: 1rpx;
		margin: 24rpx 0 0 60rpx;
	}

	.info1 {
		width: 51rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 56rpx 0 0 75rpx;
		margin-top: 0;
	}

	.bd4 {
		width: 599rpx;
		height: 33rpx;
		margin: 48rpx 0 0 76rpx;
	}

	.info2 {
		width: 400rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		display: block;
	}

	.icon3 {
		width: 36rpx;
		height: 26rpx;
		margin-top: 7rpx;
	}

	.bd5 {
		background-color: rgba(238, 238, 238, 1);
		width: 600rpx;
		height: 1rpx;
		margin: 30rpx 0 0 75rpx;
	}

	.Button93 {
		height: 100rpx;
		width: 600rpx;
		height: 100rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		box-shadow: 0px 4rpx 6rpx 0px rgba(20, 187, 146, 0.4);
		border-radius: 10rpx;

		padding: 35rpx 0 0 267rpx;
		margin-top: 80rpx;
		margin-left: 75rpx;
		box-sizing: border-box;
	}

	.txt3 {
		width: 65rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		display: block;
	}

	.info3 {
		width: 103rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(16, 156, 122, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: right;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 45rpx 0 0 570rpx;
	}
</style>
